<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no" />
		<title>未休年假补偿工具</title>
		<link crossorigin="anonymous" integrity="sha384-SkgH0ywfC/GONG2LxvaLuVuYjQqVrU/xL+FAW2Wv5zzfRZ8bmp/Na5dO3T0Zuzdh"
		 href="https://lib.baomitu.com/weui/1.1.3/style/weui.min.css" rel="stylesheet" />
		<link href="https://lib.baomitu.com/jquery-weui/1.2.0/css/jquery-weui.min.css" rel="stylesheet" />
		<script src="https://lib.baomitu.com/jquery/1.9.1/jquery.min.js"></script>
		<script src="https://lib.baomitu.com/jquery-weui/1.2.0/js/jquery-weui.min.js"></script>
		<script src="https://lib.baomitu.com/jquery-weui/1.2.0/js/swiper.min.js"></script>
		<style>
			body {
				overflow: auto;
			}
			
			.my-form .weui-cell__bd {
				display: flex;
			}
			
			.my-form.weui-cells.weui-cells_form {
				font-size: 15px;
				margin-top: 0;
			}
			
			.my-form .weui-cell__bd label {
				padding: 0 5px;
			}
			
			.my-tips {
				font-size: 12px;
			}
			
			.my-tips p:first-child {
				font-size: 14px;
				color: #444;
				font-weight: 600;
			}
			
			.my-item {
				padding: 15px 10px;
			}
			
			.my-item .weui-btn {
				line-height: 35px;
				font-size: 15px;
				border-radius: 3px;
			}
			
			.subjoin-box {
				position: fixed;
				top: 0;
				left: 0;
				bottom: 0;
				right: 0;
				background: #fff;
				z-index: 5;
				overflow: auto;
			}
			
			.my-form .weui-cell__hd>p {
				font-size: 12px;
				color: #666;
				width: 105px;
				text-align: left;
			}
			
			.my-form .weui-cell__hd>p:first-child {
				font-size: 13px;
				color: #000;
			}
			
			.my-form .weui-label{
				width: 140px;
			}
			
			.weui-dialog__bd p {
				font-size: 14px;
				text-align: start;
				padding: 8px 0;
			}
			
			.my-right-input {
				text-align: right;
				padding-right: 5px;
			}
		</style>
	</head>

	<body>
		<div style="font-weight:600;text-align: center;font-size: 17px;padding: 8px 0;">未休年假补偿计算器</div>
		<div class="weui-cells weui-cells_form my-form">
			<div class="weui-cell">
				<div class="weui-cell__hd"><label class="weui-label">未安排休年假天数</label></div>
				<div class="weui-cell__bd">
					<input id="daytime" class="weui-input" type="number" placeholder="未安排休年假天数">
					<label>天</label>
				</div>
			</div>
			<div class="weui-cell">
				<div class="weui-cell__hd"><label class="weui-label">每个月的基本工资</label></div>
				<div class="weui-cell__bd">
					<input id="salary" class="weui-input" type="number" placeholder="每个月的基本工资">
					<label>元</label>
				</div>
			</div>
		</div>
		<div class="weui-flex">

			<div class="weui-flex__item my-item">
				<a href="javascript:void(0);" onclick="reset()" class="weui-btn weui-btn_primary" style="background: #ff8369;">重置</a>
			</div>
			<div class="weui-flex__item my-item">
				<a href="javascript:void(0);" onclick="submit()" class="weui-btn weui-btn_primary" style="background: #01aaee;">计算</a>
			</div>
		</div>
		<div class="weui-cells weui-cells_form my-form">
			<div class="weui-cell">
				<div class="weui-cell__hd"><label class="weui-label">补偿薪资</label></div>
				<div class="weui-cell__bd">
					<input id="money" class="weui-input my-right-input" type="number" disabled="disabled" placeholder="补偿薪资"><label>元</label>
				</div>
			</div>
		</div>
		<script>
			function reset() {
				$("#salary").val("");
				$("#daytime").val("");
				$("#money").val("");
			}

			// 总感觉这里的逻辑有问题  等回复吧 基本完成了
			function submit() {
				//全年应享受天数 验证
				var salary = $("#salary").val();
				var daytime = $("#daytime").val();
				if (daytime == null || salary == "") {
					//提示
					$.toast("请填写应休天数", "cancel");
					return;
				}
				if (salary == null || salary == "") {
					//提示
					$.toast("请填写基本工资", "cancel");
					return;
				}

				var money = salary / 21.75 * 3 * daytime
				money = money.toFixed(2);
				$("#money").val(money);
			}

			// 显示规则的
			function openTip(title, msg) {
				$.alert("<p>" + msg + "</p>", title);
			}
		</script>
	</body>

</html>
